<template>
    <view class="content" :style="{ height: windowHeight + 'px' }">
        <u--form :model="model1" :rules="rules" ref="uForm" labelWidth="80">
            <u-form-item label="内容" prop="content">
                <u--textarea v-model="model1.content" maxlength="-1" clearable height="160"></u--textarea>
            </u-form-item>
            <u-form-item label="类别" prop="type" @click="showType = true;">
                <u--input v-model="model1.type" disabled placeholder="请选择" suffixIcon="arrow-down"
                    suffixIconStyle="rgb(172, 172, 172)"></u--input>
            </u-form-item>
            <view class="flex">
                <view class="image-title">图片</view>
                <UpLoad :fileList="model1.image" name="1" multiple :maxCount="9"
                    @onChange="(value) => { model1.image = value }" :place="'图最多可以上传9张'" />
            </view>
            <!-- <view class="flex">
                <view class="image-title">视频</view>
                <UpLoad :fileList="model1.video" name="1" multiple :maxCount="1"
                    @onChange="(value) => { model1.video = value }" :place="'视频只能上传一个'"/>
            </view> -->
        </u--form>
        <view class="buttons" @click="submits">
            我要发布
        </view>

        <!-- 类别 -->
        <u-picker keyName="name" @confirm="confirm($event, '类别')" closeOnClickOverlay title="类别" :show="showType"
            :columns="typeColumns" @close="showType = false" @cancel="showType = false"></u-picker>
    </view>
</template>

<script>
import UpLoad from '../../components/upLoad/index.vue'
import { systemInfo } from '../../utils/mixin'
import { getDicts, addCircle } from '@/api/index.js'
export default {
    components: { UpLoad },
    mixins: [systemInfo],
    data() {
        return {
            showType: false,
            typeColumns: [],
            model1: {
                content: '',
                type: '',
                image: ''
            },
            rules: {
                type: [{
                    type: 'string',
                    required: true,
                    message: '请选择类别',
                    trigger: ['blur', 'change']
                }],
                content: [
                    {
                        type: 'string',
                        required: true,
                        message: '请输入内容',
                        trigger: ['blur', 'change']
                    }
                ]
            }
        }
    },
    async onLoad() {
        // 状态栏高度
        this.getSystemInfo();

        // 字典
        const res = await getDicts('djj_popularize_type')
        res.data.forEach(element => {
            element.name = element.dictLabel
            element.value = element.dictLabel
        });
        this.typeColumns = [res.data]
    },
    methods: {
        //弹出框确定按钮
        confirm(value, name) {
            if (name == "类别") {
                this.model1.typeName = value.value[0]?.name;
                this.model1.type = value.value[0]?.value;
                this.showType = false
            }
        },
        submits() {
            this.$refs.uForm.validate().then(async (valid) => {
                if (valid) {
                    if (!this.model1.image) {
                        uni.$u.toast("请上传图片")
                    } else {
                        this.model1.image = this.model1.image.split(',').map(item => '/' + item).join(',')
                        await addCircle(this.model1)
                        uni.$u.toast("发布圈子成功")
                        await uni.switchTab({
                            url: '/pages/tabbar/follow/follow',
                            success: function (e) {
                                uni.$emit('templateClick')
                            }
                        });

                    }
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.content {
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx;

    /deep/ .u-textarea {
        background-color: rgb(245, 247, 250);
    }

    .buttons {
        margin: 50rpx auto 0;
        width: 300rpx;
        height: 80rpx;
        background-color: rgba(34, 175, 229);
        color: #fff;
        line-height: 80rpx;
        text-align: center;
        font-size: 36rpx;
        border-radius: 10rpx;
        letter-spacing: 20rpx;
    }

    .flex {
        display: flex;
        align-items: center;
        margin-top: 20rpx;

        .image-title {
            margin-right: 20rpx;
            width: 70rpx;
        }
    }
}
</style>